<template>
  <div class="detailModal">
    <a-modal v-model:open="open" :title="'NoteBook详情'" centered :footer="null" :width="416">
      <a-spin :spinning="pageLoading">
        <div class="detail-content">
          <div class="detail-item">
            <div class="label">名称</div>
            <div class="val">{{ replaceEmptyStr(formState?.name) }}</div>
          </div>
          <div class="detail-item">
            <div class="label">使用时长</div>
            <div class="val">
              {{ replaceEmptyStr(formState?.usageDuration) }}
              {{ formState?.usageDuration && formState?.usageDuration !== -1 ? '小时' : '' }}
            </div>
          </div>
          <div class="mid-line"></div>
          <div class="detail-item">
            <div class="label">镜像</div>
            <div class="val">{{ replaceEmptyStr(formState?.imageName) }}</div>
          </div>
          <div class="detail-item">
            <div class="label">框架</div>
            <div class="val">{{ replaceEmptyStr(formState?.frame) }}</div>
          </div>
          <div class="detail-item">
            <div class="label">资源配置</div>
            <div class="val noun">
              <span>GPU:{{ formState?.gpu }}GB</span>
              <span class="mid-line"></span>
              <span>CPU:{{ formState?.cpu }}Core{{ formState?.memory }}GB</span>
            </div>
          </div>
          <div class="detail-item">
            <div class="label">描述</div>
            <div class="val">{{ replaceEmptyStr(formState?.remark) }}</div>
          </div>
          <div class="detail-item">
            <div class="label">状态</div>
            <div class="val">{{ statusOptions.find(item => item.value === formState?.status)?.label }}</div>
          </div>
          <div class="detail-item">
            <div class="label">创建时间</div>
            <div class="val">{{ dateFormat(formState?.createTime as string) }}</div>
          </div>
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { dateFormat } from 'g6-fn'
  import { ref } from 'vue'
  import { useRequest } from 'vue-request'

  import { algoDevApi } from '@/services/api'
  import { replaceEmptyStr } from '@/utils'

  import { NotebookType } from '../types/index'

  const open = ref(false)
  const formState = ref<NotebookType>()
  // 类型
  const statusOptions = [
    {
      label: '全部状态',
      value: ''
    },
    {
      label: '创建中',
      value: 1
    },
    {
      label: '启动中',
      value: 2
    },
    {
      label: '运行中',
      value: 3
    },
    {
      label: '已停止',
      value: 5
    },
    {
      label: '异常',
      value: 6
    }
  ]

  const { loading: pageLoading, runAsync: runGetDetail } = useRequest(algoDevApi.detailNotebook)
  defineExpose({
    open: async (id: string | number) => {
      formState.value = {}
      open.value = true
      let res: any = await runGetDetail({}, { urlParams: { id: id } })
      formState.value = res?.data
    }
  })
</script>

<style lang="less" scoped>
  .detail-content {
    .detail-item {
      display: flex;
      justify-content: space-between;
      line-height: 22px;
      margin-bottom: 16px;

      .val {
        max-width: 258px;
        font-size: 14px;
        text-align: right;
        color: @text02;
        font-weight: 400;

        &.noun {
          display: flex;
          align-items: center;

          .mid-line {
            display: inline-block;
            margin: 0 4px;
            width: 1px;
            height: 14px;
            background-color: #e8e9eb;
          }
        }
      }

      .label {
        font-size: 14px;
        color: @text02;
        font-weight: 700;
      }
    }

    .mid-line {
      margin-bottom: 16px;
      width: 100%;
      height: 1px;
      background-color: #e8e8eb;
    }
  }
</style>
